<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>Profile - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-sm-7">
			<div class="container pt-3 pt-xl-5">
				<div class="row">

					<!-- Main content -->
					<div class="col-12">
						<!-- Title and offcanvas button -->
						<div class="d-flex justify-content-between align-items-center">
							<!-- Title -->
							<h1 class="h3 mb-0">My profile</h1>
						</div>
						<div class="col-md-12 d-flex justify-content-between">
						<!-- Personal Information -->
						<form id="userForm">
							<input type="hidden" name="userAvatar" th:value="${user.userAvatar}">
							<div class="card bg-transparent p-0">
								<!-- Card header -->
								<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
									<h6 class="rounded-0 mb-0">Personal Information</h6>
									<a th:href="@{/user/password}" class="btn btn-sm btn-white border" type="button">Update Password</a>
								</div>

								<!-- Card body -->
								<div class="card-body px-0">
									<div class="row g-4">
										<!-- Profile photo -->
										<!--<div class="col-12">
											<label class="form-label">Profile picture</label>
											<div class="d-flex align-items-center">
												<label class="position-relative me-2" title="Replace this pic">
													 Avatar place holder 
													<span class="avatar avatar-xl">
														<img class="avatar-img rounded-circle border border-white border-3 shadow" src="assets/images/avatar/07.jpg" alt="">
													</span>
													 Remove btn 
													<button class="uploadremove"><i class="bi bi-x text-white"></i></button>
												</label>
												 Upload button 
												<label class="btn btn-sm btn-dark mb-0">Change</label>
												<input class="form-control d-none" type="file">
											</div>
										</div>-->
										<!-- Full name -->
										<div class="col-6">
											<label class="form-label">Account</label>
											<div class="input-group">
												<input type="text" class="form-control" th:value="${user.userAccount}"
													readonly
													style="border: 0px solid var(--bs-border-color);">
											</div>
										</div>
										<div class="col-6">
											<label class="form-label">Role</label>
											<div class="input-group">
												<input type="text" class="form-control" th:value="${user.userType==0?'Student':'Staff'}"
													readonly
													style="border: 0px solid var(--bs-border-color);">
											</div>
										</div>

										<!-- Email -->
										<div class="col-md-6">
											<label class="form-label">Name</label>
											<input type="text" class="form-control" name="userName" th:value="${user.userName}"
												placeholder="Enter your Name">
										</div>

										<!-- Mobile -->
										<div class="col-md-6">
											<label class="form-label">Mobile number</label>
											<input type="text" class="form-control" name="userMobile" th:value="${user.userMobile}"
												placeholder="Enter your mobile number">
										</div>

										<!-- Mobile -->
										<div class="col-md-6">
											<label class="form-label">Idcard number</label>
											<input type="text" class="form-control" name="userIdcard" th:value="${user.userIdcard}"
												placeholder="Enter your Idcard number">
										</div>

										<!-- Button -->
										<div class="col-12 text-end">
											<button type="submit" class="btn btn-primary mb-0">Save Changes</button>
										</div>

									</div>
								</div>
							</div>
						</form>
						</div>
					</div>
				</div>

			</div>
		</section>
	</div>
	<script layout:fragment="fragment_script">
	$(document).ready(function () {
			$("#userForm").validate({
				rules: {
					userName: {
						required: true
					},
					userMobile: {
						required: true
					},
					userIdcard: {
						required: true
					}
				},
				submitHandler: function (form) {
					var formData = $(form).serialize();
					$.post(ctx + "/user/updateUser", formData, function (resp) {
						layer.msg(resp.msg);
						if (resp.status == 0) {
							setTimeout(function(){
								window.location.reload()
							}, 1000)
						}
					})
					return false; 
				}
			})
		});
	</script>
</body>

</html>